<template>
  <view class="m-check-box" @click="emit">
    <view class="check-icon" :class="{checked:value}"  :style="[style]"></view>
    <view class="text" v-if="$slots.default">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "m-checkbox",
  props: {
    checked: {
      type: Boolean,
      default: false
    },
    size: {
      type: String | Number,
      default: 30
    },
    defaultColor: {
      type: String,
      default: "#000"
    },
    checkedColor: {
      type: String,
      default: '#a62b2b'
    },
    value: {
      type: Boolean,
      default: false
    },
	disabled:{
		type:Boolean,
		default:false
	}
  },
  computed: {
    style() {
      return {
        width: this.$u.addUnit(this.size),
        height: this.$u.addUnit(this.size),
        borderColor: this.checked ? this.defaultColor : this.checkedColor,
      }
    }
  },
  methods:{
	  emit(){
		  if(!this.disabled){
			this.$emit('input',!this.value)  
		  }
	  }
  },
  
}
</script>

<style lang="less">
.m-check-box{
  line-height: 30rpx;
  align-items: center;
  display: flex;
  .check-icon {
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    border: 2rpx solid #000;
    &.checked {
      background: url("/static/images/checked.png");
      background-size: 100%;
    }
  }
  .text{
    margin-left: 10rpx;
  }
}

</style>
